<script setup lang="ts">
import { reactive, ref } from 'vue'
import LocalCache from "@/utils/cache"
import { useUserInfo } from "@/stores/user"

const formData = reactive({
  account: LocalCache.getCache('account') || "",
  password: LocalCache.getCache('password') || "",
})
const isRemember = ref(false)
const form = ref()
const userInfo = useUserInfo()
const login = async () => {
  await userInfo.getUserInfo(formData, isRemember)
}
</script>

<template>
  <div class="login flex">
    <div class="main mt-20">
      <div class="login-logo mb15">
      </div>
      <var-form ref="form">
        <var-space direction="column" :size="[14, 0]">
          <var-input placeholder="请输入用户名" clearable :rules="[v => !!v || '用户名不能为空']" v-model="formData.account" />
          <var-input type="password" clearable placeholder="请输入密码" :rules="[v => !!v || '密码不能为空']"
            v-model="formData.password" />
        </var-space>
      </var-form>
      <div class="login-btn mt30">
        <var-button block type="danger" @click="login">
          登录
        </var-button>
      </div>
      <div class="remember mt10 text-center">
        <var-checkbox v-model="isRemember">记住我</var-checkbox>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.login {
  height: 100%;
  background-image: url("@/assets/logo-bg.png");
  flex-direction: column;
  justify-content: center;

  .main {
    width: 80%;
    margin: 0 auto;
  }
}
</style>